<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
    插值语法是不能用在属性赋值操作  无法解析  插值语法事实现节点内容动态操作
    v-bind指令 可以实现标签属性的动态操作
      语法：
        v-bind:属性名='data中的属性名'  简化  v-bind:src  等价    :src
-->
<div id="app">
    <p>
<!--        <img v-bind:src="source" width="1226">-->
        <img :src="source" width="1226">
    </p>
    <p>
        <button @click="pre">上一张</button>
        <button @click="next">下一张</button>
    </p>

</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            sources:[
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a644c0be9094f589307e60fdb8f271f6.jpg',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/269708f5c2638e962799b1250b1362b7.png',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1c08a2dff9ee0acb925f25d00f86575.jpg',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ad090beb21360d40ed1960389c20d293.png',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b55795abb3d69350bf0a5cc9a7d5b276.jpg',
                'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/90132823ea953f2387d0f92f369430ea.jpg'
            ],
            source:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a644c0be9094f589307e60fdb8f271f6.jpg',
            index:0
        },
        methods: {
            pre(){
                this.index--
                if (this.index<0){
                    this.index = this.sources.length-1
                }
                this.source = this.sources[this.index]
            },
            next(){
                this.index++
                if (this.index== this.sources.length){
                    this.index = 0
                }
                this.source = this.sources[this.index]
            }
        }
    })
</script>

</body>
</html>
